iT邦幫忙

2021 iThome 鐵人賽

DAY 14
2
Modern Web

初學者跪著學JavaScript系列 第 14

初學者跪著學JavaScript Day14 : 創建Array 四種方式

  • 分享至 

  • xImage
  •  

一日客語:睡覺 客語:睡目 soi55mug2 雖木˙
介紹:

  1. 有字面值:[ ]
  2. [ ]裡面值稱為元素,使用comma逗號區隔
  3. index數值是無號的32bit整數
    陣列可以放:Math.pow(2,32)-1 =4294967295個元素
    index最大4294967294
  4. 可以動態增加/減少陣列大小
  5. 元素可以任何type
  6. 允許有缺值
  7. 是迭代的物件,能使用for/of
  8. 是特殊物件,能用for/in 找array的index值

建立Array方法

  1. array literal:最簡單創立方法,[ ]裡面什麼都可以
  2. array constructor:若引數是單一數值會是array的長度,非單一數值就是新創建陣列的元素
  3. iterable(可迭代) object使用分散式運算子:可以copy其他陣列第一層元素
  4. Array.of 和Array.from
    Array.of:引數新創建陣列的元素
    Array.from:可迭代物件/類陣列可以轉為陣列元素

1.array literals

元素可以任何type

let mrArray1 = [];
let myArray2 = [7, 10];
let mrArray3 = [9, true, 'wendy', {}, []];
let mrArray4 = [1, , 3];
console.log(mrArray1);//[]
console.log(myArray2);//[ 7, 10 ]
console.log(mrArray3);//[ 9, true, 'wendy', {}, [] ]
console.log(mrArray4);//[ 1, <1 empty item>, 3 ]

陣列可以放:
Math.pow(2,32)-1 =4294967295個元素
index最大4294967294

let empty = [];
empty.length = Math.pow(2, 32) - 1; //使用index 範圍
console.log(empty); //[ <4294967295 empty items> ]
empty.length = Math.pow(2, 32); // RangeError: Invalid array length

2.array constructor 建構器

new Array()

不使用引數

let a = new Array();
console.log(a); //[]

使用引數

引數放單一數字
這種方式沒有值在Array裡
多個數字會被認為那是陣列的元素

let b = new Array(5);
console.log(b);  //[ <5 empty items> ]
console.log(b[0]); //undefined

引數放單個元素(非數字)/多個元素

let c = new Array('apple', ['1'], 1, {});
console.log(c);//[ 'apple', [ '1' ], 1, {} ]

let d = new Array({});
console.log(d);//[ {} ]

3.iterable(可迭代) object使用分散式運算子

分散式運算子不是真正的運算子

  • 是一種淺拷貝方式,不會改變到原陣列但在陣列裡的陣列會改到原陣列

let a = ['apple', 'water', 'banana', 'orange', 'milk'];
let b = [...a];
let c = [...'abcdefghijklmnopqrs'];
b[0] = 'OMG';
console.log(a);//[ 'apple', 'water', 'banana', 'orange', 'milk' ]
console.log(b);//[ 'OMG', 'water', 'banana', 'orange', 'milk' ]
console.log(c);
//[
//  'a', 'b', 'c', 'd', 'e',
//  'f', 'g', 'h', 'i', 'j',
//  'k', 'l', 'm', 'n', 'o',
//  'p', 'q', 'r', 's'
//]

let a = ['apple', 'water', 'banana', 'orange', 'milk', ['phone']];
let b = [...a];


//改b陣列的元素
b[0] = 'OMG'; //第一層
b[5][0] = 'HTC'; //第二層

//看看a陣列是否也跟著改
console.log(a);
//[ 'apple', 'water', 'banana', 'orange', 'milk', [ 'HTC' ] ]

//b[0]不會改到a陣列元素
//b[5][0]會改到a陣列的元素

4.Array.of 和Array.from

在new Array()
ex:new Array(10) 引數是單一數值,會被當作array 的長度,
陣列會有10個位置沒有裝東西

但是我想輸入一個數值這數值是元素不是array 的長度?

const myArray1 = [10];
console.log(myArray1);//[ 10 ]

const myArray2 = [];
myArray[0] = 10;
console.log(myArray2);//[ 10 ]

但這樣太慢了,想要引數是10要如何做呢?
可以使用.Array.of

Array.of()

語法:Array.of(element0[, element1[, ...[, elementN]]])
elementN:新建立陣列的元素。
返回值:Array instance(實體/實例)
mdn:
Array.of() 與 Array 建構式之間的不同在於如何處理整數引數:Array.of(7) 會建立一個擁有單個元素7的陣列

const a = Array.of(10);
console.log(a); //[ 10 ]

const b = Array.of(10, 20);
console.log(b); //[ 10, 20 ]

const x = Array.of(undefined);
console.log(x); // undefined ]

const y = Array.of(null);
console.log(y); //[ null ]

const z = Array.of('wendy', 'apple');
console.log(z); //[ 'wendy', 'apple' ]

Array.from()

mdn:類陣列(array-like)或可迭代(iterable)物件建立一個新的 Array instance(實體/實例)

Array.from(arrayLikeOrIterable[, mapFunction[, thisArg]]);

第一參數 : 可迭代物件/類陣列
第二參數 : 可以使用/不使用function,建立新陣列過程中元素都會代入function,function return 的值回傳入新陣列內

回傳:新的Array

也可以做出淺拷貝方式

const myArray = [3, 6, 9];
const copy = Array.from(myArray);
console.log(copy);//[ 3, 6, 9 ]
console.log(Array.from('apple'));
//[ 'a', 'p', 'p', 'l', 'e' ]
console.log(Array.from([5, 10, 20], (x) => x + x));
//[ 10, 20, 40 ]

類陣列轉成真正的Array

const arrayLike = { 0: 'wendy', 1: 'apple', 2: 'banana', length: 3 };
const myArray = Array.from(arrayLike, (item) => {
    return item;
});

console.log(myArray);//[ 'wendy', 'apple', 'banana' ]

填充數字

const arrayLike = {
    length: 3,
};

const myArray = Array.from(arrayLike, () => {
    return 0;
});

console.log(myArray); //[ 0, 0, 0 ]
const length = 3;
const myArray = Array.from({ length }, (item) => {
    return 0;
});

console.log(myArray); //[ 0, 0, 0 ]

使用for/of

for/of使用在可迭代物件

let a = ['apple', 'water', 'banana', 'orange', 'milk', ['phone']];
let b = [...a];

for (let item of b) {
    console.log(item);
}
結果
apple
water
banana
orange
milk
[ 'phone' ]

使用for/in

in可以任何物件,物件的話會物件的key值
但array會是index

let a = ['apple', 'water', 'banana', 'orange', 'milk', ['phone']];
let b = [...a];

for (let item in b) {
    console.log(item);
    //0
    //1
    //2
    //3
    //4
    //5
}
let a = { red: 'apple', yellow: 'banana' };
console.log(a);
for (let x in a) {
    console.log(x);
    //red
    //yellow
}

來源:
JS大全
5 Handy Applications of JavaScript Array.from()


上一篇
初學者跪著學JavaScript Day13 : 物件加字串?物件加物件?
下一篇
初學者跪著學JavaScript Day15 : 陣列中沒被定義的空值(empty item)
系列文
初學者跪著學JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言